<template>
	<view class="container">
		<view class="wrapper">
			<view class="item-title">{{goodsInfo.goods_name}}</view>
			<view class="item-introduction">{{introduction}}</view>
			<view class="item-unit">
				<text class="tit">Units</text>
				<view class="item-num">
					<uni-number-box 
						class="step"
						:min="minNum" 
						:max="maxNum"
						:value="goodsNum"
						@change="numberChange"
					></uni-number-box>
				</view>
				<view class="item-price">
					<text class="red-price">${{(goodsNum * parseFloat(goodsInfo.goods_price)).toFixed(2) + ' '}}</text>/ unite
				</view>
			</view>
			<view class="item-unit-total">
				<text class="total-tit">Total :<text class="red-price">${{totalPrice.toFixed(2) + ' '}}</text></text>
			</view>
			<view class="item-title fsz14">Add Notes</view>
			<view class="item-notes">
				<textarea maxlength="-1" v-model="notes" />
			</view>
			<view class="item-title fsz14">Add Photo</view>
			<view class="item-photo">
				<image class="preview-img" v-for="(item, index) in imageList" :key="index" mode="aspectFit" :src="imgUrlHeader + item"></image>
				<image class='upload-add-btn' mode="aspectFit" src="/static/images/Add_Photo_Image.png" @click="addPhoto()"></image>
			</view>
		</view>
		<view class="footer-tips" v-show="isAddCart">
			<text class="tit">{{tipsText}}</text>
			<text class="tip-right" @click="toCart">Go to Cart</text>
		</view>
		<view class="footer">
			<button class="add-btn" @click="addCart">{{addCartBtnText}}</button>
			<button class="cart-btn" @click="toCart">Cart</button>
		</view>
	</view>
</template>

<script>
	import uniNumberBox from '@/components/uni-number-box/uni-number-box.vue';
	import {
		apiUrl
	} from '@/config/config.js';
	export default {
		components: {
			uniNumberBox
		},
		data() {
			return {
				isAddCart: false,
				imageList: [],
				serviceTitle: 'I Unit Air Con Unit',
				goods_id: '',
				cart_id: '',
				goodsInfo: {},
				introduction: '',
				goodsNum: 1,
				minNum: 1,
				maxNum: 100,
				notes: '',
				addCartBtnText: 'Add to Cart',
				tipsText: 'Add to cart successfully'
			}
		},
		onLoad(options) {
			if(options.goods_id) {
				this.goods_id = options.goods_id
			} else if(options.cart_id) {
				this.cart_id = options.cart_id
				this.addCartBtnText = 'Save'
				this.tipsText = 'Save sucessfully'
			}
			this.loadData();
		},
		computed: {
			totalPrice() { // 计算总价
				// 是否有额外的价格，如果有就从第二个开始按照额外价格计算
				if(this.goodsInfo.goods_extra_price && parseFloat(this.goodsInfo.goods_extra_price) > 0) {
					if(this.goodsNum > 1) {
						return (this.goodsNum - 1) * parseFloat(this.goodsInfo.goods_extra_price) + parseFloat(this.goodsInfo.goods_price)
					} else {
						return parseFloat(this.goodsInfo.goods_price)
					}
				} else {
					return this.goodsNum * parseFloat(this.goodsInfo.goods_price)
				}
			},
			imgUrlHeader() {
				return apiUrl
			}
		},
		methods: {
			async loadData() {
				let _this = this
				let data = {
					goods_id: this.goods_id
				}
				
				if(this.cart_id) {
					this.$api.cartDetail({id: this.cart_id}, res => {
						if(res.code === 1) {
							_this.goodsInfo = res.data
							_this.notes = res.data.goods_remark
							_this.imageList = res.data.goods_images
							_this.goodsNum = res.data.goods_num
							_this.goods_id = data.goods_id = res.data.goods_id
							_this.$api.goodsDetail(data, res1 => {
								if(res1.code === 1) {
									_this.introduction = res1.data.goods_desc
									_this.minNum = res.data.goods_min_limit
									res1.data.specs.forEach(item=> {
										if(_this.introduction) {
											_this.introduction += '\r\n';
										}
										_this.introduction += item.sp_name + ': ' + item.sp_value
									})
									if(parseFloat(res.data.goods_extra_price) > 0) {
										if(_this.introduction) {
											_this.introduction += '\r\n';
										}
										_this.introduction += 'extra: ' + res.data.goods_extra_price
									}
								}
							})
						}
					})
				} else {
					this.$api.goodsDetail(data, res => {
						if(res.code === 1) {
							_this.goodsInfo = res.data
							_this.introduction = res.data.goods_desc
							_this.minNum = res.data.goods_min_limit
							_this.goodsNum = res.data.goods_min_limit
							res.data.specs.forEach(item=> {
								if(_this.introduction) {
									_this.introduction += '\r\n';
								}
								_this.introduction += item.sp_name + ': ' + item.sp_value
							})
							if(parseFloat(res.data.goods_extra_price) > 0) {
								if(_this.introduction) {
									_this.introduction += '\r\n';
								}
								_this.introduction += 'extra: ' + res.data.goods_extra_price
							}
						}
					})
				}
			},
			// 跳转购物车
			toCart() {
				uni.switchTab({
					url: '/pages/cart/cart'
				})
			},
			// 添加到购物车
			addCart() {
				let data = {
					goods_id: this.goods_id,
					goods_num: this.goodsNum,
					goods_remark: this.notes,
					goods_images: this.imageList
				}
				if(this.cart_id) {
					data.id = this.cart_id
				}
				let _this = this
				this.$api.cartSave(data, res => {
					if(res.code === 1) {
						_this.isAddCart = true;
					} else {
						_this.$common.errorToShow(res.msg)
					}
				})
			},
			numberChange(value) {
				this.goodsNum = value.newVal
			},
			// 添加照片
			addPhoto() {
				let data = {
					key: 'file'
				}
				let _this = this
				this.$api.upload_refund_pic(data, res => {
					_this.imageList = res
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.wrapper {
	margin-top: 9rpx;
	padding: 40rpx 40rpx 120rpx;
	.item-title {
		font-size: $font-lg;
		font-weight: bold;
		margin-bottom: 32rpx;
	}
	.item-introduction {
		font-size: $font-sm;
		line-height: 180%;
		font-family: Roboto;
		letter-spacing: 1rpx;
		color: #9098B1;
		margin-bottom: 70rpx;
		white-space: pre-line;
	}
	.item-unit {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: flex-start;
		padding-bottom: 20rpx;
		border-bottom: 1px solid #E4E7ED;
		.tit {
			font-weight: bold;
			font-size: $font-base;
			line-height: 50rpx;
			margin-right: 30rpx;
		}
		.item-num {
			flex: 2;
			position: relative;
		}
		.item-price {
			color: #BCB9BA;
			font-size: $font-base;
			line-height: 150%;
			letter-spacing: 1rpx;
			.red-price {
				color: #F64B15;
				font-size: $font-lg;
				font-weight: bold;
			}
		}
	}
	.item-unit-total {
		display: flex;
		justify-content: flex-end;
		margin-top: 10rpx;
		margin-bottom: 20rpx;
		.total-tit {
			font-size: $font-base;
			line-height: 150%;
			font-weight: bold;
			color: #223263;
			text {
				margin-left: 26rpx;
			}
		}
	}
	.item-notes {
		border: 2rpx solid #EBF0FF;
		box-sizing: border-box;
		border-radius: 10rpx;
		padding: 32rpx 32rpx 22rpx;
		margin-bottom: 34rpx;
		height: 250rpx;
		textarea {
			width: 100%;
			font-family: Roboto;
			font-size: $font-sm;
			line-height: 180%;
			letter-spacing: 1rpx;
			color: #9098B1;
		}
	}
	.item-photo {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		.preview-img {
			height: 144rpx;
			width: 25%;
			padding-right: 2%;
			margin-bottom: 20rpx;
		}
		.upload-add-btn {
			width: 144rpx;
			height: 144rpx;
		}
	}
}
.footer-tips {
	position: fixed;
	background-color: rgba(0,0,0,.9);
	bottom: 124rpx;
	height: 80rpx;
	width: 100%;
	padding: 16rpx 40rpx;
	.tit {
		font-family: Roboto;
		font-size: $font-base;
		color: #ffffff;
		letter-spacing: -0.1rpx;
		float: left;
		line-height: 48rpx;
	}
	.tip-right {
		float: right;
		font-weight: 500;
		font-family: Roboto;
		font-size: $font-base;
		letter-spacing: -0.1rpx;
		color: #F9FD2B;
		line-height: 48rpx;
	}
}
.footer {
	.add-btn {
		flex: 8;
		margin-right: 10rpx;
	}
	.cart-btn {
		flex: 2;
		background: #2DC897;
		box-shadow: 0 20rpx 60rpx rgba(64, 191, 255, 0.24);
		border-radius: 10rpx;
		font-weight: bold;
		font-size: $font-sm + 2upx;
		color: #FFFFFF;
		letter-spacing: 1rpx;
		text-indent: 20rpx;
		&::after {
			content: "";
			background: url(/static/images/Mask.png) no-repeat;
			background-size: contain;
			background-position: left;
			position: absolute;
			top: 30%;
			left: 20rpx;
			height: 60rpx;
			width: 60rpx;
			border: none;
		}
	}
}
</style>
